<template>
	<view class="container" :style="{minHeight:$height()}">
		<view class="top"></view>
		<view class="inputs">

			<view class="items">

				<view class="item king-flex__between">
					<view style="width: 25%;" class="title">
						请选择地区
					</view>
					<view class="right king-align__center" style="width: 75%;flex-wrap: wrap;justify-content: flex-end;">
						<view v-for="(item,index) in city" :key="index" class="radio-item king-align__center" @click="areaChange(index)">
							<i v-if="areaIndex == index" class="iconfont selected">&#xe637;</i>
							<i v-else class="iconfont">&#xe8bb;</i>
							<text>{{item.name}}</text>
						</view>
					</view>


				</view>

				<view class="item king-flex__between">
					<view class="title" style="width: 25%;">
						签约模式
					</view>

					<view class="right king-align__center" style="width: 75%;flex-wrap: wrap;justify-content: flex-end;">

						<view v-for="(item,index) in serviceModeList" :key="index" class="radio-item king-align__center" @click="tagChange(item.tag,index)">
							<i v-if="index == typeIndex" class="iconfont selected">&#xe637;</i>
							<i v-else class="iconfont">&#xe8bb;</i>
							<text>{{item.name}}</text>
						</view>
						
					</view>
				</view>

				<view class="item king-flex__between">
					<view class="left">
						年用电量
					</view>

					<view class="right king-align__center">
						<input type="float" class="input" placeholder="请输入用户年用电量 (单位:万千瓦时) " v-model="form.quantity" />
					</view>
				</view>
				<view class="item king-flex__between" v-if="tag == 'BILI'">
					<view class="left">
						长协均价
					</view>

					<view class="right king-align__center">
						<input type="text" class="input" placeholder="请输入长协均价(单位:元/千瓦时)" v-model="form.avg_price" />
					</view>
				</view>

				<view class="item king-flex__between" v-if="tag == 'BILI'">
					<view class="left">
						公司分成
					</view>

					<view class="right king-align__center">
						<input type="text" class="input" placeholder="请输入公司分成(单位:%)" v-model="form.company_divide" />
					</view>
				</view>

				<view class="item king-flex__between" v-if="tag == 'FUWU' || tag == 'HUNFUWU'">
					<view class="left">
						服务费单价
					</view>

					<view class="right king-align__center">
						<input type="text" class="input" placeholder="服务费单价0或者0以上(单位:元/千瓦时)"
							v-model="form.server_price" />
					</view>
				</view>
				
				<view class="item king-flex__between" v-if="tag == 'JIANGXI'">
					<view class="left">
						客户分成
					</view>
				
					<view class="right king-align__center">
						<input type="text" class="input" placeholder="请输入客户分成(单位:%)"
							v-model="form.custom_divide" />
					</view>
				</view>
				
				<view class="item king-flex__between" v-if="tag == 'JIANGXI'">
					<view class="left">
						交易均价
					</view>
				
					<view class="right king-align__center">
						<input type="text" class="input" placeholder="请输入交易均价" v-model="form.business_price" />
					</view>
				</view>

			</view>


		</view>

		<view class="tips">
			<view class="header king-align__center">
				<view class="line"></view>
				<text>温馨提示</text>
			</view>

			<view class="content">
				<view>模式：{{tags.name}},业务员佣金 = </view>
				<view>{{tags.formulaTip}}</view>
				<view style="color:red;margin-top:20rpx;">备注：此计算结果不含个税部分，个税根据结算时的国家相关政策执行。</view>
			</view>

		</view>
		<view class="buttons">
			<u-button @click="create" type="primary">生成佣金</u-button>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				benchmarkPrice: 0.4692, //基准价
				serviceModeList: [], //服务费模式列表
				tag: "", //服务费模式
				tags: {},
				form: {},
				city: [], //城市
				typeIndex: 0, //模式
				areaIndex: 0, //地区
			}
		},
		onLoad() {

		},
		onShow() {
			//获取城市
			this.getCity()


			//获取上限基准价
			this.$axios.request(this.$api.getTenant, "GET").then((val) => {
				this.form.avg_price = val.data.avgPrice
				this.benchmarkPrice = val.data.benchmarkPrice

			})

		},
		methods: {
			getCity() {
				this.$axios.request(this.$api.getCityTenantCode, "GET").then((val) => {
					this.city = val.data
					this.getServiceModeRes()
				})
			},
			getServiceModeRes() {
				this.$axios.request(this.$api.getServiceModeRes, "POST", {
					tenantCode: this.city[this.areaIndex].tenantCode
				}).then((val) => {
					this.serviceModeList = val.data
					this.tag = val.data[0].tag
					this.tags = val.data[0]
				})
			},

			areaChange(idx) {

				this.typeIndex = 0
				this.areaIndex = idx
				this.getServiceModeRes()
				this.form = {}
			},
			tagChange(tag, index) {

				this.tag = tag
				this.tags = this.serviceModeList[index]
				this.typeIndex = index
			},
			create(e) {
				
				this.form.id = this.serviceModeList[this.typeIndex].id
				this.form.tenantCode = this.city[this.areaIndex].tenantCode
				this.$axios.request(this.$api.doCounter, "POST", this.form).then((val) => {
					uni.showModal({
						title: '计算结果',
						content: `获得佣金：${val.data}元`,
						showCancel: false,
						success: (e) => {
							this.form = {}
						}
					});
				})

			},
			taxes(price) {
				var taxesScale = 0
				if (price < 36000) {
					taxesScale = 3
				} else if (price > 36000 && price <= 144000) {
					taxesScale = 10
				} else if (price > 144000 && price <= 300000) {
					taxesScale = 20
				} else if (price > 300000 && price <= 420000) {
					taxesScale = 25
				} else if (price > 420000 && price <= 660000) {
					taxesScale = 30
				} else if (price > 660000 && price <= 960000) {
					taxesScale = 35
				} else {
					taxesScale = 45
				}

				return (100 - taxesScale) / 100
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f5f5f5;
	}

	.top {
		height: 170rpx;
		background-color: #3975EA;
	}

	.inputs {
		width: 100%;
		padding: 2%;
		margin-top: -158rpx;

		.items {
			background-color: #FFFFFF;
			padding: 30rpx;

			.item {
				width: 100%;
				margin-bottom:10px;
				.left {
					width: 10%;
					flex: 1;
					color: #303030;
					font-size: 26rpx;
					font-weight: bold;
				}

				.input {
					width: 490rpx;
					flex: 9;
					font-size: 24rpx;
					border: 1px solid #b9b9b9;
					padding: 18rpx;
					border-radius: 10rpx;
				}

				.radio-item {
					// margin-right: 50rpx;
					width:50%;
					padding:2px 0px;
					i {
						font-size: 38rpx;
					}

					.selected {
						color: #3975EA;
					}

					text {
						margin-left: 18rpx;
						color: #666666;
						width: 50px;
						font-size: 24rpx;
					}
				}
			}
		}
	}

	.tips {
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-bottom:50px;
		.header {
			margin-left: 15rpx;
			height: 76rpx;
			border-bottom: 1px solid #f4f5f8;

			.line {
				width: 4rpx;
				height: 24rpx;
				background-color: #3975EA;
			}

			text {
				margin-left: 18rpx;
				font-size: 26rpx;
				color: #333333;
			}
		}

		.content {
			font-size: 22rpx;
			padding: 34rpx;
			line-height: 40rpx;
			color: #333333;
		}

	}

	.buttons {
		margin: auto;
		position: fixed;
		bottom: 50rpx;
		padding: 0rpx 30rpx;
		width: 100%;

	}
</style>
